<template>
	<view class="zh-u-modal">
		<u-mask :show="props.show" @click="close"></u-mask>
		<view class="content" v-show="props.show">
			<view class="close" @click="close">
				<image src="@/static/icons/close_icon.png" class="close-icon" />
			</view>
			<swiper
				class="swiper"
				:indicator-dots="false" 
				:autoplay="false"
				:disable-programmatic-animation="true"
				:current = "props.current"
				:duration="0"
			>
				<swiper-item v-for="(item, index) in imgs" :key="index">
					<view class="swiper-item">
						<image :src="item" class="preview-img" mode="widthFix"/>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup lang="ts">
	
	const props = defineProps<{
		show: boolean
		imgs:Array<string>
		current?:number
	}>()
	const emit = defineEmits(['close'])
	
	const close = () => {
		emit('close')
	}
</script>

<style lang="scss" scoped>
	.zh-u-modal {
		.content {
			width:750rpx;
			height:100%;
			position:fixed;
			top:0;
			left:0;
			z-index:2;
			.close {
				position:absolute;
				top:30rpx;
				right:30rpx;
				width: 45rpx;
				height:45rpx;
				text-align:center;
				border:1rpx solid rgba(255,255,255,0.5);
				border-radius: 23rpx;
				z-index:10;
				.close-icon {
					width: 28rpx;
					height:28rpx;
					margin-top:9rpx;
				}
			}
			.swiper {
				height:100%;
				.swiper-item {
					height:100%;
					.preview-img {
						position:absolute;
						top:50%;
						left:50%;
						transform: translate(-50%, -50%);
						width:100%;
					}
				}
			}
		}
	}
</style>